<template>
  <div class="list-content">
    <div class="list-content-item" v-for="item in data">
      <a-tag v-if="item.type == 1" :color="colorStyle(item.level)">{{item.value}}</a-tag>
      <span v-if="item.type == 2">{{ item.key }}</span>
      <p v-if="item.type == 2">{{ item.value }}</p>
    </div>
  </div>
</template>

<script>
export default {
  name: "ResultListContent",
  props: {
    data: {
      type: Array,
      default: []
    },
  },
  methods: {
    colorStyle : function(level){
      if(level ==1){
        return this.color.level1
      } else if(level == 2){
        return this.color.level2
      } else if(level == 3){
        return this.color.level3
      } else if(level == 4){
        return this.color.level4
      } else if(level == 5){
        return this.color.level5
      } else {
        return this.color.level5
      }

    }
  },
  data(){
    return {
      color:{
        level1: '#dc3545' ,
        level2: '#ffc107' ,
        level3: '#17a2b8' ,
        level4: '#28a745' ,
        level5: '#6c757d'
      }
    }
  }
}
</script>

<style lang="less" scoped>
.list-content-item {
  color: rgba(0, 0, 0, .45);
  display: inline-block;
  vertical-align: middle;
  font-size: 14px;
  margin-left: 10px;
  text-align: center;
  span {
    line-height: 20px;
  }
  p {
    margin-top: 4px;
    margin-bottom: 0;
    line-height: 22px;
    color: rgba(0, 0, 0, .85);
  }
}
</style>